<template>
    <div id="app">
        <!-- 筛选条件 -->
        <div class="filter-container">
            <div class="filter-row">
                <div class="filter-group">
                    <label class="filter-label">年份选择</label>
                    <el-select v-model="queryParams.selectedYear" placeholder="请选择年份" style="width:100%">
                        <el-option v-for="year in years" :key="year" :label="year" :value="year">
                        </el-option>
                    </el-select>
                </div>

                <div class="filter-group">
                    <label class="filter-label">月份选择</label>
                    <el-select v-model="queryParams.selectedMonths" multiple placeholder="请选择月份" style="width:100%">
                        <el-option v-for="month in months" :key="month.value" :label="month.label" :value="month.value">
                        </el-option>
                    </el-select>
                </div>

                <div class="filter-group">
                    <label class="filter-label">产线选择</label>
                    <el-select v-model="queryParams.selectedLines" multiple placeholder="请选择产线" style="width:100%">
                        <el-option v-for="line in productionLines" :key="line" :label="line" :value="line">
                        </el-option>
                    </el-select>
                </div>
            </div>

            <div class="action-buttons">
                <el-button type="primary" icon="el-icon-search" @click="query">查询数据</el-button>
                <el-button icon="el-icon-refresh" @click="re">重置条件</el-button>
            </div>
        </div>

        <!-- 图表区域 - 修改为每行3个图表 -->
        <div class="chart-grid">
            <!-- 投诉件数 -->
            <div class="chart-card" @dblclick="navigateToChart('claim', '投诉件数详情')">
                <div class="chart-header">
                    <div class="chart-title">
                        <i class="el-icon-warning-outline"></i>
                        Claim-投诉件数
                    </div>
                </div>
                <div class="chart-body">
                    <div class="chart-container" ref="Claim"></div>
                </div>
            </div>
            <!-- Non-conformity 不合格 -->
            <div class="chart-card" @dblclick="navigateToChart('nonConformity', 'Non-conformity不合格')">
                <div class="chart-header">
                    <div class="chart-title">
                        <i class="el-icon-circle-close"></i>
                        Non-conformity-不合格
                    </div>
                </div>
                <div class="chart-body">
                    <div class="chart-container" ref="Non_conformity"></div>
                </div>
            </div>

            <!-- 选别费用 -->
            <div class="chart-card" @dblclick="navigateToChart('sortingFee', 'sortingFee-选别费用')">
                <div class="chart-header">
                    <div class="chart-title">
                        <i class="el-icon-s-finance"></i>
                        Sorting Fee-选别费用
                    </div>
                </div>
                <div class="chart-body">
                    <div class="chart-container" ref="sortingFee"></div>
                </div>
            </div>

            <!-- ScrapRatio-废弃金额率 -->
            <div class="chart-card" @dblclick="navigateToChart('scrapRatio', 'Scrap Ratio-废弃金额率')">
                <div class="chart-header">
                    <div class="chart-title">
                        <i class="el-icon-s-finance"></i>
                        Scrap Ratio-废弃金额率
                    </div>
                </div>
                <div class="chart-body">
                    <div class="chart-container" ref="scrapRatio"></div>
                </div>
            </div>

            <!-- CAPA-纠防 -->
            <div class="chart-card" @dblclick="navigateToChart('capa', 'CAPA-纠防')">
                <div class="chart-header">
                    <div class="chart-title">
                        <i class="el-icon-s-finance"></i>
                        CAPA-纠防
                    </div>
                </div>
                <div class="chart-body">
                    <div class="chart-container" ref="capa"></div>
                </div>
            </div>
            <!-- Compliance-合规 -->
            <div class="chart-card" @dblclick="navigateToChart('compliance', 'Compliance-合规')">
                <div class="chart-header">
                    <div class="chart-title">
                        <i class="el-icon-s-finance"></i>
                        Compliance-合规
                    </div>
                </div>
                <div class="chart-body">
                    <div class="chart-container" ref="compliance"></div>
                </div>
            </div>
            <!-- IPQC Findings-IPQC巡查问题 -->
            <div class="chart-card" @dblclick="navigateToChart('findingsIPQC', 'IPQC Findings-IPQC巡查问题')">
                <div class="chart-header">
                    <div class="chart-title">
                        <i class="el-icon-s-finance"></i>
                        IPQC Findings-IPQC巡查问题
                    </div>
                </div>
                <div class="chart-body">
                    <div class="chart-container" ref="findingsIPQC"></div>
                </div>
            </div>
            <!-- 3rd Party Findings-第三方巡查问题 -->
            <div class="chart-card" @dblclick="navigateToChart('partyFinding3rd', '3rd Party Findings-第三方巡查问题')">
                <div class="chart-header">
                    <div class="chart-title">
                        <i class="el-icon-s-finance"></i>
                        3rd Party Findings-第三方巡查问题
                    </div>
                </div>
                <div class="chart-body">
                    <div class="chart-container" ref="partyFinding3rd"></div>
                </div>
            </div>

            <!-- OQC Batch Scan-OQC扫码不良 -->
            <div class="chart-card" @dblclick="navigateToChart('oqcBatchScan', 'OQC Batch Scan-OQC扫码不良')">
                <div class="chart-header">
                    <div class="chart-title">
                        <i class="el-icon-s-finance"></i>
                        OQC Batch Scan-OQC扫码不良
                    </div>
                </div>
                <div class="chart-body">
                    <div class="chart-container" ref="oqcBatchScan"></div>
                </div>
            </div>

            <!-- OQC LRR%-OQC判退率 -->
            <div class="chart-card" @dblclick="navigateToChart('oqcLrr', 'OQC LRR%-OQC判退率')">
                <div class="chart-header">
                    <div class="chart-title">
                        <i class="el-icon-s-finance"></i>
                        OQC LRR%-OQC判退率
                    </div>
                </div>
                <div class="chart-body">
                    <div class="chart-container" ref="oqcLrr"></div>
                </div>
            </div>

            <!-- OQC DPPM-OQC抽检不良 -->
            <div class="chart-card" @dblclick="navigateToChart('oqcDppm', 'OQC DPPM-OQC抽检不良')">
                <div class="chart-header">
                    <div class="chart-title">
                        <i class="el-icon-s-finance"></i>
                        OQC DPPM-OQC抽检不良
                    </div>
                </div>
                <div class="chart-body">
                    <div class="chart-container" ref="oqcDppm"></div>
                </div>
            </div>

            <!-- OQC OBA-OBA抽检 -->
            <div class="chart-card" @dblclick="navigateToChart('oqcOba', 'OQC OBA-OBA抽检')">
                <div class="chart-header">
                    <div class="chart-title">
                        <i class="el-icon-s-finance"></i>
                        OQC OBA-OBA抽检
                    </div>
                </div>
                <div class="chart-body">
                    <div class="chart-container" ref="oqcOba"></div>
                </div>
            </div>

            <!-- Fox Insight Highlight-Fox系统问题 -->
            <div class="chart-card" @dblclick="navigateToChart('foxInsight', 'Fox Insight Highlight-Fox系统问题')">
                <div class="chart-header">
                    <div class="chart-title">
                        <i class="el-icon-s-finance"></i>
                        Fox Insight Highlight-Fox系统问题
                    </div>
                </div>
                <div class="chart-body">
                    <div class="chart-container" ref="foxInsight"></div>
                </div>
            </div>

            <!-- SPI FPY/FY-工程良率(SPI) -->
            <div class="chart-card" @dblclick="navigateToChart('spiFpy', 'SPI FPY/FY-工程良率(SPI)')">
                <div class="chart-header">
                    <div class="chart-title">
                        <i class="el-icon-s-finance"></i>
                        SPI FPY/FY-工程良率(SPI)
                    </div>
                </div>
                <div class="chart-body">
                    <div class="chart-container" ref="spiFpy"></div>
                </div>
            </div>

            <!-- AOI FPY/FY-工程良率(AOI) -->
            <div class="chart-card" @dblclick="navigateToChart('aoiFpy', 'AOI FPY/FY-工程良率(AOI)')">
                <div class="chart-header">
                    <div class="chart-title">
                        <i class="el-icon-s-finance"></i>
                        AOI FPY/FY-工程良率(AOI)
                    </div>
                </div>
                <div class="chart-body">
                    <div class="chart-container" ref="aoiFpy"></div>
                </div>
            </div>

            <!-- ICT FPY/FY-工程良率(ICT) -->
            <div class="chart-card" @dblclick="navigateToChart('ictFpy', 'ICT FPY/FY-工程良率(ICT)')">
                <div class="chart-header">
                    <div class="chart-title">
                        <i class="el-icon-s-finance"></i>
                        ICT FPY/FY-工程良率(ICT)
                    </div>
                </div>
                <div class="chart-body">
                    <div class="chart-container" ref="ictFpy"></div>
                </div>
            </div>

        </div>
    </div>
</template>

<script>

import * as echarts from 'echarts';
import { querytable, querytableMonthList } from "@/api/smtdashboard/dashboard"

export default {
    name: "QualityDashboard",
    data() {
        return {
            //表格数据
            tableData: [],
            //查询参数
            total: 0,
            queryParams: {
                selectedYear: '',
                selectedMonths: [],
                selectedLines: [],
            },
            data: {},
            years: [],
            months: [
                { value: 'Jan', label: '1月' },
                { value: 'Feb', label: '2月' },
                { value: 'Mar', label: '3月' },
                { value: 'Apr', label: '4月' },
                { value: 'May', label: '5月' },
                { value: 'Jun', label: '6月' },
                { value: 'Jul', label: '7月' },
                { value: 'Aug', label: '8月' },
                { value: 'Sep', label: '9月' },
                { value: 'Oct', label: '10月' },
                { value: 'Nov', label: '11月' },
                { value: 'Dec', label: '12月' }
            ],
            productionLines: ['#1', '#2', '#3', '#4', '#5', '#6', '#7', '#8', '#9', '#10', '#11', '#12', '#13', '#14', '#15'],
            charts: [], // 存储图表实例
            chartRoutes: {
                claim: '/quality/claim',
                nonConformity: '/quality/nonConformity',
                sortingFee: '/quality/sortingFee',
                scrapRatio: '/quality/scrapRatio',
                capa: '/quality/capa',
                compliance: '/quality/compliance',
                findingsIPQC: '/quality/findingsIPQC',
                partyFinding3rd: '/quality/partyFinding3rd',
                oqcBatchScan: '/quality/oqcBatchScan',
                oqcLrr: '/quality/oqcLrr',
                oqcDppm: '/quality/oqcDppm',
                oqcOba: '/quality/oqcOba',
                foxInsight: '/quality/foxInsight',
                spiFpy: '/quality/spiFpy',
                aoiFpy: '/quality/aoiFpy',
                ictFpy: '/quality/ictFpy'
            }
        }
    },
    created() {
        this.shortYear()
    },
    mounted() {
        this.$nextTick(() => {
            this.query();
        });
    },
    beforeDestroy() {
    },
    methods: {
        //查询
        query() {
            const year = '20' + this.queryParams.selectedYear.slice(-2) + '-'
            const selectedMonths = [];
            if (this.queryParams.selectedMonths != []) {
                for (let index = 0; index < this.queryParams.selectedMonths.length; index++) {
                    selectedMonths.push(year + this.queryParams.selectedMonths[index]);
                }
            }
            // alert(JSON.stringify(selectedMonths))
            if (this.queryParams.selectedLines.length == 1) {
                querytableMonthList(this.queryParams.selectedYear, selectedMonths, this.queryParams.selectedLines).then(response => {
                    this.tableData = response
                    this.initChartClaim(response, 1);
                    this.initChartNonConformity(response, 1);
                    this.initChartSortingFee(response, 1);
                    this.initChartScrapRatio(response, 1);
                    this.initChartCAPA(response, 1);
                    this.initChartCompliance(response, 1);
                    this.initChartFindingsIPQC(response, 1);
                    this.initChartPartyFinding3rd(response, 1);
                    this.initChartOQCBatchScan(response, 1);
                    this.initChartOQCLrr(response, 1);
                    this.initChartOQCDppm(response, 1);
                    this.initChartOQCOba(response, 1);
                    this.initChartFoxInsight(response, 1);
                    this.initChartSpiFpy(response, 1);
                    this.initChartAoiFpy(response, 1);
                    this.initChartIctFpy(response, 1);
                })
            } else {
                querytable(this.queryParams.selectedYear, selectedMonths, this.queryParams.selectedLines).then(response => {
                    this.tableData = response
                    this.initChartClaim(response);
                    this.initChartNonConformity(response);
                    this.initChartSortingFee(response);
                    this.initChartScrapRatio(response);
                    this.initChartCAPA(response);
                    this.initChartCompliance(response);
                    this.initChartFindingsIPQC(response);
                    this.initChartPartyFinding3rd(response);
                    this.initChartOQCBatchScan(response);
                    this.initChartOQCLrr(response);
                    this.initChartOQCDppm(response);
                    this.initChartOQCOba(response);
                    this.initChartFoxInsight(response);
                    this.initChartSpiFpy(response);
                    this.initChartAoiFpy(response);
                    this.initChartIctFpy(response);
                })
            }

        },
        //重置
        re() {
            this.queryParams.selectedMonths = []
            this.queryParams.selectedLines = []
            this.query()
        },
        //获取当前年
        shortYear() {
            const year = new Date().getFullYear();
            const lyear = (year % 100) - 2;
            this.queryParams.selectedYear = "F" + (year % 100);
            for (let index = 0; index < 5; index++) {
                this.years.push("F" + (lyear + index))
            }
        },
        // 双击跳转方法
        navigateToChart(chartKey, title) {
            const routePath = this.chartRoutes[chartKey];
            if (routePath) {
                // 使用若依框架的标签页导航方法
                this.$tab.openPage(title, routePath, this.queryParams);
            } else {
                console.warn(`未找到 ${chartKey} 对应的路由`);
                this.$modal.msgWarning(`未配置 ${chartKey} 的跳转路由`);
            }

        },
        initChartClaim(response, type) {
            let chartDom;
            chartDom = this.$refs.Claim;
            if (!chartDom) return;
            const chart = echarts.init(chartDom);
            let datas;
            if (type) {
                datas = [
                    ['月份', '投诉等级-H1', '投诉等级-C', '投诉件数'],
                    ...response.map(item => [
                        item.month,   // 对应xAxis数据
                        item.claimH1,   // 投诉等级-H1
                        item.claimC,   // 投诉等级-C
                        item.claimTotal    // 投诉件数
                    ])
                ];
            } else {
                datas = [
                    ['生产线', '投诉等级-H1', '投诉等级-C', '投诉件数'],
                    ...response.map(item => [
                        item.line,   // 对应xAxis数据
                        item.claimH1,   // 投诉等级-H1
                        item.claimC,   // 投诉等级-C
                        item.claimTotal    // 投诉件数
                    ])
                ];
            }
            let maxClaim = 0;
            let ClaimH1 = 0;
            let ClaimC = 0
            let allClaim = 0;
            for (let index = 0; index < response.length; index++) {
                ClaimH1 += response[index].claimH1;
                ClaimC += response[index].claimC;
                allClaim += response[index].claimTotal;
                if (response[index].claimTotal > maxClaim) {
                    maxClaim = response[index].claimTotal;
                }

            }
            let sum = 1;
            for (let index = 0; index < (maxClaim + "").length; index++) {
                sum += '0'
            }
            maxClaim = Math.ceil(maxClaim / sum * 10) * sum / 10;
            // 柱状图
            const option = {
                title: [
                    // 右侧标题
                    {
                        text: `总投诉件数:${allClaim} H1:${ClaimH1} C级:${ClaimC}`,
                        right: 0,
                        top: 0,
                        textStyle: {
                            fontSize: 12,
                            fontWeight: 'bold'
                        }
                    },
                    // 主标题
                    {
                        left: 'center',
                        top: 30  // 下移给顶部标题留空间
                    }
                ],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                dataset: [
                    {
                        source: datas,
                    },
                ],
                legend: {
                    data: ['投诉等级-H1', '投诉等级-C', '投诉件数'],
                    bottom: 10
                },
                grid: {
                    top: '15%',
                    right: '5%',
                    left: '10%',
                    bottom: '20%'
                },
                xAxis: {
                    type: 'category',
                    axisLabel: {
                        interval: 0,
                        rotate: 0
                    }
                },
                yAxis:
                    [
                        {
                            type: 'value',
                            axisPointer: {
                                lable: {
                                    formatter: function (params) {
                                        return Math.round(params.value)
                                    }
                                }
                            },
                            name: '',
                            min: 0,
                            max: maxClaim,
                            position: 'left',
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: '#5470C6'
                                }
                            },
                            axisLabel: {
                                formatter: function (value) {
                                    return Math.round(value);
                                }

                            }
                        },
                        {
                            type: 'value',
                            name: '',
                            min: 0,
                            max: maxClaim,
                            position: 'left',
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: '#5470C6'
                                }
                            },
                            axisLabel: {
                                formatter: '{value}'
                            }
                        },
                        {}
                    ],
                series: [
                    {
                        name: '投诉等级-H1',
                        type: 'bar',
                        barWidth: '20%',
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#FFCA66' },
                                { offset: 0.5, color: '#FDB62E' },
                                { offset: 1, color: '#FFA402' }
                            ])
                        },
                        emphasis: {
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    { offset: 0, color: '#FFA402' },
                                    { offset: 0.7, color: '#FDB62E' },
                                    { offset: 1, color: '#FFCA66' }
                                ])
                            }
                        },
                        datasetIndex: 0
                    },
                    {
                        name: '投诉等级-C',
                        type: 'bar',
                        barWidth: '20%',
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#EF8080' },
                                { offset: 0.5, color: '#F14444' },
                                { offset: 1, color: '#FF0000' }
                            ])
                        },
                        emphasis: {
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    { offset: 0, color: '#FF0000' },
                                    { offset: 0.7, color: '#F14444' },
                                    { offset: 1, color: '#EF8080' }
                                ])
                            }
                        },
                        datasetIndex: 0
                    },
                    {
                        name: '投诉件数',
                        type: 'line',
                        label: {
                            show: true,
                            position: 'top',
                        },
                        yAxisIndex: 1,
                        symbol: 'circle',
                        symbolSize: 8,
                        lineStyle: {
                            width: 3,
                            type: 'dashed'
                        },
                        itemStyle: {
                            color: '#E851D6'
                        },
                        datasetIndex: 0
                    }
                ]
            };

            chart.setOption(option);
        },
        initChartNonConformity(response, type) {
            let chartDom;
            chartDom = this.$refs.Non_conformity;
            if (!chartDom) return;

            const chart = echarts.init(chartDom);
            let datas;
            if (type) {
                datas = [
                    ['月份', '不合格件数'],
                    ...response.map(item => [
                        item.month,   // 对应xAxis数据
                        item.nonConformity    // 不合格件数
                    ])
                ];
            } else {
                datas = [
                    ['生产线', '不合格件数'],
                    ...response.map(item => [
                        item.line,   // 对应xAxis数据
                        item.nonConformity    // 不合格件数
                    ])
                ];
            }
            let max = 0;
            let allNonConformity = 0;
            for (let index = 0; index < response.length; index++) {
                allNonConformity += response[index].nonConformity;
                if (response[index].nonConformity > max) {
                    max = response[index].nonConformity;
                }
            }
            let sum = 1;
            for (let index = 0; index < (max + "").length; index++) {
                sum += '0'
            }
            max = Math.ceil(max / sum * 10) * sum / 10;

            // 柱状图
            const option = {
                title: [
                    // 右侧标题
                    {
                        text: `总件数:${allNonConformity}`,
                        right: 0,
                        top: 0,
                        textStyle: {
                            fontSize: 12,
                            fontWeight: 'bold'
                        }
                    },
                    // 主标题
                    {
                        left: 'center',
                        top: 30  // 下移给顶部标题留空间
                    }
                ],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                dataset: [
                    {
                        source: datas,
                    },

                ],
                legend: {
                    data: ['投诉等级-H1', '投诉等级-C', '投诉件数'],
                    bottom: 10
                },
                grid: {
                    top: '15%',
                    right: '5%',
                    left: '10%',
                    bottom: '20%'
                },
                xAxis: {
                    type: 'category',
                    // data: this.queryParams.selectedLines,
                    axisLabel: {
                        interval: 0,
                        rotate: 0
                    }
                },
                yAxis:
                    [
                        {
                            type: 'value',
                            name: '',
                            min: 0,
                            max: max,
                            position: 'left',
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: '#5470C6'
                                }
                            },
                            axisLabel: {
                                formatter: '{value}'
                            }
                        }
                    ],
                series: [
                    {
                        name: '不合格件数',
                        type: 'bar',
                        label: {
                            show: true,
                            position: 'top',
                        },
                        barWidth: '25%',
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#EF8080' },
                                { offset: 0.5, color: '#F14444' },
                                { offset: 1, color: '#FF0000' }
                            ])
                        },
                        emphasis: {
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    { offset: 0, color: '#FF0000' },
                                    { offset: 0.7, color: '#F14444' },
                                    { offset: 1, color: '#EF8080' }
                                ])
                            }
                        },
                        datasetIndex: 0
                    }
                ]
            };

            chart.setOption(option);
        },
        initChartSortingFee(response, type) {
            let chartDom;
            chartDom = this.$refs.sortingFee;
            if (!chartDom) return;

            const chart = echarts.init(chartDom);
            let datas;
            if (type) {
                datas = [
                    ['月份', '选别费用-到货', '选别费用-客诉', '总选别费'],
                    ...response.map(item => [
                        item.month,   // 对应xAxis数据
                        (item.sortingFeeIqc / 1000).toFixed(0),   // 选别费用-到货
                        (item.sortingFeeClaim / 1000).toFixed(0),   // 选别费用-客诉
                        (item.sortingFeeTotal / 1000).toFixed(0)    // 总选别费
                    ])
                ];
            } else {
                datas = [
                    ['生产线', '选别费用-到货', '选别费用-客诉', '总选别费'],
                    ...response.map(item => [
                        item.line,   // 对应xAxis数据
                        (item.sortingFeeIqc / 1000).toFixed(0),   // 选别费用-到货
                        (item.sortingFeeClaim / 1000).toFixed(0),   // 选别费用-客诉
                        (item.sortingFeeTotal / 1000).toFixed(0)    // 总选别费
                    ])
                ];
            }
            let max = 0;
            let sum2 = 0;
            let sum3 = 0
            let sum1 = 0;
            for (let index = 0; index < response.length; index++) {
                sum2 += response[index].sortingFeeIqc;
                sum3 += response[index].sortingFeeClaim;
                sum1 += response[index].sortingFeeTotal;
                if (response[index].sortingFeeTotal > max) {
                    max = response[index].sortingFeeTotal;
                }
            }
            let sum = 1;
            for (let index = 0; index < (max + "").length; index++) {
                sum += '0'
            }
            max = (Math.ceil(max / sum * 10) * sum / 10 / 1000).toFixed(0);

            // 柱状图
            const option = {
                title: [

                    // 右侧标题
                    {
                        text: `总选别费(KRMB):${(sum1 / 1000).toFixed(0)} 到货选:${(sum2 / 1000).toFixed(0)} 客诉选:${(sum3 / 1000).toFixed(0)}`,
                        right: 0,
                        top: 0,
                        textStyle: {
                            fontSize: 12,
                            fontWeight: 'bold'
                        }
                    },
                    // 主标题
                    {
                        left: 'center',
                        top: 30  // 下移给顶部标题留空间
                    }
                ],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                dataset: [
                    {
                        source: datas,
                    },
                ],
                legend: {
                    data: ['选别费用-到货', '选别费用-客诉', '总选别费'],
                    bottom: 10
                },
                grid: {
                    top: '15%',
                    right: '5%',
                    left: '10%',
                    bottom: '20%'
                },
                xAxis: {
                    type: 'category',
                    // data: this.queryParams.selectedLines,
                    axisLabel: {
                        interval: 0,
                        rotate: 0
                    }
                },
                yAxis:
                    [
                        {
                            type: 'value',
                            name: '',
                            min: 0,
                            max: max,
                            position: 'left',
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: '#5470C6'
                                }
                            },
                            axisLabel: {
                                formatter: '{value}'
                            }
                        },
                        {
                            type: 'value',
                            name: '',
                            min: 0,
                            max: max,
                            position: 'left',
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: '#5470C6'
                                }
                            },
                            axisLabel: {
                                formatter: '{value}'
                            }
                        },
                        {}
                    ],
                series: [
                    {
                        name: '选别费用-到货',
                        type: 'bar',
                        barWidth: '25%',
                        label: {
                            show: true,
                            position: 'top',
                        },
                        // data: [65, 59, 80, 81, 56, 55],
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#FFCA66' },
                                { offset: 0.5, color: '#FDB62E' },
                                { offset: 1, color: '#FFA402' }
                            ])
                        },
                        emphasis: {
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    { offset: 0, color: '#FFA402' },
                                    { offset: 0.7, color: '#FDB62E' },
                                    { offset: 1, color: '#FFCA66' }
                                ])
                            }
                        },
                        datasetIndex: 0
                    },
                    {
                        name: '选别费用-客诉',
                        type: 'bar',
                        label: {
                            show: true,
                            position: 'top',
                        },
                        barWidth: '25%',
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#EF8080' },
                                { offset: 0.5, color: '#F14444' },
                                { offset: 1, color: '#FF0000' }
                            ])
                        },
                        emphasis: {
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    { offset: 0, color: '#FF0000' },
                                    { offset: 0.7, color: '#F14444' },
                                    { offset: 1, color: '#EF8080' }
                                ])
                            }
                        },
                        datasetIndex: 0
                    },
                    {
                        name: '总选别费',
                        type: 'line',
                        yAxisIndex: 1,
                        symbol: 'circle',
                        symbolSize: 8,
                        lineStyle: {
                            width: 3,
                            type: 'dashed'
                        },
                        itemStyle: {
                            color: '#E851D6'
                        },
                        datasetIndex: 0
                    }
                ]
            };

            chart.setOption(option);
        },
        initChartScrapRatio(response, type) {
            let chartDom;
            chartDom = this.$refs.scrapRatio;
            if (!chartDom) return;

            const chart = echarts.init(chartDom);
            let datas;
            if (type) {
                datas = [
                    ['月份', '投入金额', '废弃金额', '废弃金额率'],
                    ...response.map(item => [
                        item.month,   // 对应xAxis数据
                        (item.inputAmount / 1000).toFixed(0),   // 投入金额
                        (item.scarpAmount / 1000).toFixed(0),   // 废弃金额
                        item.inputAmount ? (item.scarpAmount / item.inputAmount * 100).toFixed(1) : '0.00'  // 废弃金额率
                    ])
                ];
            } else {
                datas = [
                    ['生产线', '投入金额', '废弃金额', '废弃金额率'],
                    ...response.map(item => [
                        item.line,   // 对应xAxis数据
                        (item.inputAmount / 1000).toFixed(0),   // 投入金额
                        (item.scarpAmount / 1000).toFixed(0),   // 废弃金额
                        item.inputAmount ? (item.scarpAmount / item.inputAmount * 100).toFixed(1) : '0.00'  // 废弃金额率
                    ])
                ];
            }
            let max = 0;
            let max2 = 0;
            let sum3 = 0;
            let sum4 = 0;
            for (let index = 0; index < response.length; index++) {
                sum3 += response[index].inputAmount ? response[index].inputAmount : 0;
                sum4 += response[index].scarpAmount ? response[index].scarpAmount : 0;
                if (response[index].inputAmount > max) {
                    max = response[index].inputAmount;
                }
                if (response[index].scarpAmount / response[index].inputAmount > max2) {
                    max2 = response[index].scarpAmount / response[index].inputAmount;
                }
            }
            let sum = 1;
            for (let index = 0; index < (max + "").length; index++) {
                sum += '0'
            }
            max = (max * 1.2 / 1000).toFixed(0);
            max2 = Math.ceil(max2 * 10) * 10;
            sum3 = sum4 / sum3 * 100
            // 柱状图
            const option = {
                title: [

                    // 右侧标题
                    {
                        text: `总废弃金额率:${Number(sum3).toFixed(1)}%`,
                        right: 0,
                        top: 0,
                        textStyle: {
                            fontSize: 12,
                            fontWeight: 'bold'
                        }
                    },
                    // 主标题
                    {
                        left: 'center',
                        top: 30  // 下移给顶部标题留空间
                    }
                ],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                dataset: [
                    {
                        source: datas,
                    },
                ],
                legend: {
                    data: ['投入金额', '废弃金额', '废弃金额率'],
                    bottom: 10
                },
                grid: {
                    top: '15%',
                    right: '5%',
                    left: '10%',
                    bottom: '20%'
                },
                xAxis: {
                    type: 'category',
                    // data: this.queryParams.selectedLines,
                    axisLabel: {
                        interval: 0,
                        rotate: 0
                    }
                },
                yAxis:
                    [
                        {
                            type: 'value',
                            name: '',
                            min: 0,
                            max: max,
                            position: 'left',
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: '#5470C6'
                                }
                            },
                            axisLabel: {
                                formatter: '{value}'
                            }
                        },
                        {
                            type: 'value',
                            name: '',
                            min: 0,
                            max: max2,
                            position: 'right',
                            offset: 0,
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: '#EE6666'
                                }
                            },
                            axisLabel: {
                                formatter: '{value}%'
                            }
                        },
                        {}
                    ],
                series: [
                    {
                        name: '投入金额',
                        type: 'bar',
                        barWidth: '25%',
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#83bff6' },
                                { offset: 0.5, color: '#188df0' },
                                { offset: 1, color: '#188df0' }
                            ])
                        },
                        emphasis: {
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    { offset: 0, color: '#2378f7' },
                                    { offset: 0.7, color: '#2378f7' },
                                    { offset: 1, color: '#83bff6' }
                                ])
                            }
                        },
                        datasetIndex: 0
                    },
                    {
                        name: '废弃金额',
                        type: 'bar',
                        barWidth: '25%',
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#EF8080' },
                                { offset: 0.5, color: '#F14444' },
                                { offset: 1, color: '#FF0000' }
                            ])
                        },
                        emphasis: {
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    { offset: 0, color: '#FF0000' },
                                    { offset: 0.7, color: '#F14444' },
                                    { offset: 1, color: '#EF8080' }
                                ])
                            }
                        },
                        datasetIndex: 0
                    },
                    {
                        name: '废弃金额率',
                        type: 'line',
                        yAxisIndex: 1,
                        symbol: 'circle',
                        symbolSize: 8,
                        lineStyle: {
                            width: 3,
                            type: 'dashed',
                        },
                        label: {
                            show: true,
                            position: 'top',
                            formatter: function (params) {
                                return params.value[3] + '%';
                            }
                        },
                        itemStyle: {
                            color: '#E851D6'
                        },
                        datasetIndex: 0
                    }
                ]
            };

            chart.setOption(option);
        },
        initChartCAPA(response, type) {
            let chartDom;
            chartDom = this.$refs.capa;
            if (!chartDom) return;

            const chart = echarts.init(chartDom);
            let datas;
            if (type) {
                datas = [
                    ['月份', '纠防件数'],
                    ...response.map(item => [
                        item.month,   // 对应xAxis数据
                        item.capa    // 纠防件数
                    ])
                ];
            } else {
                datas = [
                    ['生产线', '纠防件数'],
                    ...response.map(item => [
                        item.line,   // 对应xAxis数据
                        item.capa    // 纠防件数
                    ])
                ];
            }
            let max = 0;
            let allNonConformity = 0;
            for (let index = 0; index < response.length; index++) {
                allNonConformity += response[index].capa;
                if (response[index].capa > max) {
                    max = response[index].capa;
                }
            }
            let sum = 1;
            for (let index = 0; index < (max + "").length; index++) {
                sum += '0'
            }
            max = Math.ceil(max / sum * 10) * sum / 10;

            // 柱状图
            const option = {
                title: [
                    // 右侧标题
                    {
                        text: `总件数:${allNonConformity}`,
                        right: 0,
                        top: 0,
                        textStyle: {
                            fontSize: 12,
                            fontWeight: 'bold'
                        }
                    },
                    // 主标题
                    {
                        left: 'center',
                        top: 30  // 下移给顶部标题留空间
                    }
                ],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                dataset: [
                    {
                        source: datas,
                    }
                ],
                legend: {
                    data: ['纠防件数'],
                    bottom: 10
                },
                grid: {
                    top: '15%',
                    right: '5%',
                    left: '10%',
                    bottom: '20%'
                },
                xAxis: {
                    type: 'category',
                    // data: this.queryParams.selectedLines,
                    axisLabel: {
                        interval: 0,
                        rotate: 0
                    }
                },
                yAxis:
                    [
                        {
                            type: 'value',
                            name: '',
                            min: 0,
                            max: max,
                            position: 'left',
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: '#5470C6'
                                }
                            },
                            axisLabel: {
                                formatter: '{value}'
                            }
                        }
                    ],
                series: [
                    {
                        name: '纠防件数',
                        type: 'bar',
                        label: {
                            show: true,
                            position: 'top',
                        },
                        barWidth: '25%',
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#EF8080' },
                                { offset: 0.5, color: '#F14444' },
                                { offset: 1, color: '#FF0000' }
                            ])
                        },
                        emphasis: {
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    { offset: 0, color: '#FF0000' },
                                    { offset: 0.7, color: '#F14444' },
                                    { offset: 1, color: '#EF8080' }
                                ])
                            }
                        },
                        datasetIndex: this.datasetIndex
                    }
                ]
            };

            chart.setOption(option);
        },
        initChartCompliance(response, type) {
            let chartDom;
            chartDom = this.$refs.compliance;
            if (!chartDom) return;

            const chart = echarts.init(chartDom);
            let datas;
            if (type) {
                datas = [
                    ['月份', '合规-客户指摘', '合规-内部指摘', '合规-总件数'],
                    ...response.map(item => [
                        item.month,   // 对应xAxis数据
                        item.compCustomer,   // 合规-客户指摘
                        item.compInternal,   // 合规-内部指摘
                        item.complianceTotal    // 合规总件数
                    ])
                ];
            } else {
                datas = [
                    ['生产线', '合规-客户指摘', '合规-内部指摘', '合规-总件数'],
                    ...response.map(item => [
                        item.line,   // 对应xAxis数据
                        item.compCustomer,   // 合规-客户指摘
                        item.compInternal,   // 合规-内部指摘
                        item.complianceTotal    // 合规总件数
                    ])
                ];
            }
            let max = 0;
            let sum1 = 0;
            for (let index = 0; index < response.length; index++) {
                sum1 += response[index].complianceTotal;
                if (response[index].complianceTotal > max) {
                    max = response[index].complianceTotal;
                }
            }
            let sum = 1;
            for (let index = 0; index < (max + "").length; index++) {
                sum += '0'
            }
            max = Math.ceil(max / sum * 10) * sum / 10 + 5;

            // 柱状图
            const option = {
                title: [
                    // 右侧标题
                    {
                        text: `总件数:${sum1}`,
                        right: 0,
                        top: 0,
                        textStyle: {
                            fontSize: 12,
                            fontWeight: 'bold'
                        }
                    },
                    // 主标题
                    {
                        left: 'center',
                        top: 30  // 下移给顶部标题留空间
                    }
                ],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                dataset: [
                    {
                        source: datas,
                    }
                ],
                legend: {
                    data: this.orderlist,
                    bottom: 10
                },
                grid: {
                    top: '15%',
                    right: '5%',
                    left: '10%',
                    bottom: '20%'
                },
                xAxis: {
                    type: 'category',
                    // data: this.queryParams.selectedLines,
                    axisLabel: {
                        interval: 0,
                        rotate: 0
                    }
                },
                yAxis:
                    [
                        {
                            type: 'value',
                            name: '',
                            min: 0,
                            max: max,
                            position: 'left',
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: '#5470C6'
                                }
                            },
                            axisLabel: {
                                formatter: '{value}'
                            }
                        },
                        {
                            type: 'value',
                            name: '',
                            min: 0,
                            max: max,
                            position: 'left',
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: '#5470C6'
                                }
                            },
                            axisLabel: {
                                formatter: '{value}'
                            }
                        },
                        {}
                    ],
                series: [
                    {
                        name: '合规-客户指摘',
                        type: 'bar',
                        barWidth: '25%',
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#EF8080' },
                                { offset: 0.5, color: '#F14444' },
                                { offset: 1, color: '#FF0000' }
                            ])
                        },
                        emphasis: {
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    { offset: 0, color: '#FF0000' },
                                    { offset: 0.7, color: '#F14444' },
                                    { offset: 1, color: '#EF8080' }
                                ])
                            }
                        },
                        datasetIndex: 0
                    },
                    {
                        name: '合规-内部指摘',
                        type: 'bar',
                        barWidth: '25%',
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#FFCA66' },
                                { offset: 0.5, color: '#FDB62E' },
                                { offset: 1, color: '#FFA402' }
                            ])
                        },
                        emphasis: {
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    { offset: 0, color: '#FFA402' },
                                    { offset: 0.7, color: '#FDB62E' },
                                    { offset: 1, color: '#FFCA66' }
                                ])
                            }
                        },
                        datasetIndex: 0
                    },
                    {
                        name: '合规-总件数',
                        type: 'line',
                        yAxisIndex: 1,
                        symbol: 'circle',
                        symbolSize: 8,
                        lineStyle: {
                            width: 3,
                            type: 'dashed'
                        },
                        label: {
                            show: true,
                            position: 'top',
                        },
                        itemStyle: {
                            color: '#E851D6'
                        },
                        datasetIndex: 0
                    }
                ]
            };

            chart.setOption(option);
        },
        initChartFindingsIPQC(response, type) {
            let chartDom;
            chartDom = this.$refs.findingsIPQC;
            if (!chartDom) return;

            const chart = echarts.init(chartDom);
            let datas;
            if (type) {
                datas = [
                    ['月份', 'IPQC-严重', 'IPQC-轻微', 'IPQC指摘件数', 'IPQC关闭率%', 'IPQC动态关闭率'],
                    ...response.map(item => [
                        item.month,   // 对应xAxis数据
                        item.ipqcMajor,   // IPQC严重
                        item.ipqcMinor,   // IPQC轻微
                        item.ipqcFindings,  //IPQC指摘件数
                        item.ipqcFindings ? (item.ipqcCloseMil / item.ipqcFindings * 100).toFixed(0) : '0',  // IPQC关闭率
                        item.ipqcLatestCloseMil ? (item.ipqcCloseMil / item.ipqcLatestCloseMil * 100).toFixed(0) : '0'
                    ])
                ];
            } else {
                datas = [
                    ['生产线', 'IPQC-严重', 'IPQC-轻微', 'IPQC指摘件数', 'IPQC关闭率%', 'IPQC动态关闭率'],
                    ...response.map(item => [
                        item.line,   // 对应xAxis数据
                        item.ipqcMajor,   // IPQC严重
                        item.ipqcMinor,   // IPQC轻微
                        item.ipqcFindings,  //IPQC指摘件数
                        item.ipqcCloseMil ? (item.ipqcCloseMil / item.ipqcFindings * 100).toFixed(0) : '0',  // IPQC关闭率
                        item.ipqcLatestCloseMil ? (item.ipqcLatestCloseMil / item.ipqcFindings * 100).toFixed(0) : '0'
                    ])
                ];
            }
            let max = 0;
            let sum1 = 0;
            let sum3 = 0;
            let sum4 = 0;
            for (let index = 0; index < response.length; index++) {
                sum1 += response[index].ipqcFindings;
                sum3 += response[index].ipqcCloseMil;
                sum4 += response[index].ipqcLatestCloseMil;
                if (response[index].ipqcFindings > max) {
                    max = response[index].ipqcFindings;
                }
            }

            let sum = 1;
            for (let index = 0; index < (max + "").length; index++) {
                sum += '0'
            }
            max = (max * 1.2).toFixed(0)
            // 柱状图
            const option = {
                title: [
                    // 右侧标题
                    {
                        text: `总件数:${sum1}     总关闭率:${Number(sum3 / sum1 * 100).toFixed(0)}%`,
                        right: 0,
                        top: 0,
                        textStyle: {
                            fontSize: 12,
                            fontWeight: 'bold'
                        }
                    },
                    // 主标题
                    {
                        left: 'center',
                        top: 30  // 下移给顶部标题留空间
                    }
                ],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                dataset: [
                    {
                        source: datas,
                    }
                ],
                legend: {
                    data: ['IPQC-严重', 'IPQC-轻微', 'IPQC指摘件数', 'IPQC关闭率%', '动态关闭率%'],
                    bottom: 10
                },
                grid: {
                    top: '15%',
                    right: '5%',
                    left: '10%',
                    bottom: '20%'
                },
                xAxis: {
                    type: 'category',
                    // data: this.queryParams.selectedLines,
                    axisLabel: {
                        interval: 0,
                        rotate: 0
                    }
                },
                yAxis:
                    [
                        {
                            type: 'value',
                            name: '',
                            min: 0,
                            max: max,
                            position: 'left',
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: '#5470C6'
                                }
                            },
                            axisLabel: {
                                formatter: '{value}'
                            }
                        },
                        {
                            type: 'value',
                            name: '',
                            min: 0,
                            max: 100,
                            position: 'right',
                            offset: 0,
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: '#EE6666'
                                }
                            },
                            axisLabel: {
                                formatter: '{value}%'
                            }
                        },
                    ],
                series: [
                    {
                        name: 'IPQC-严重',
                        type: 'bar',
                        barWidth: '25%',
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#EF8080' },
                                { offset: 0.5, color: '#F14444' },
                                { offset: 1, color: '#FF0000' }
                            ])
                        },
                        emphasis: {
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    { offset: 0, color: '#FF0000' },
                                    { offset: 0.7, color: '#F14444' },
                                    { offset: 1, color: '#EF8080' }
                                ])
                            }
                        },
                        datasetIndex: 0
                    },
                    {
                        name: 'IPQC-轻微',
                        type: 'bar',
                        barWidth: '25%',
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#FFCA66' },
                                { offset: 0.5, color: '#FDB62E' },
                                { offset: 1, color: '#FFA402' }
                            ])
                        },
                        emphasis: {
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    { offset: 0, color: '#FFA402' },
                                    { offset: 0.7, color: '#FDB62E' },
                                    { offset: 1, color: '#FFCA66' }
                                ])
                            }
                        },
                        datasetIndex: 0
                    },
                    {
                        name: 'IPQC指摘件数',
                        type: 'line',
                        yAxisIndex: 0,
                        symbol: 'circle',
                        symbolSize: 8,
                        lineStyle: {
                            width: 3,
                            type: 'dashed',
                        },
                        label: {
                            show: true,
                            position: 'top',
                        },
                        itemStyle: {
                            color: '#E851D6'
                        },
                        datasetIndex: 0
                    },
                    {
                        name: 'IPQC关闭率%',
                        type: 'line',
                        yAxisIndex: 1,
                        symbol: 'circle',
                        symbolSize: 8,
                        lineStyle: {
                            width: 3,
                            // type: 'dashed',
                        },
                        label: {
                            show: true,
                            position: 'top',
                            formatter: function (params) {
                                return params.value[4] + '%';
                            }
                        },
                        itemStyle: {
                            color: '#4EC9F1'
                        },
                        datasetIndex: 0
                    },
                    {
                        name: '动态关闭率%',
                        type: 'line',
                        yAxisIndex: 1,
                        symbol: 'circle',
                        symbolSize: 8,
                        lineStyle: {
                            width: 3,
                            type: 'dashed',
                        },
                        label: {
                            show: true,
                            position: 'top',
                            formatter: function (params) {
                                return params.value[5] + '%';
                            }
                        },
                        itemStyle: {
                            color: '#4EC9F1'
                        },
                        datasetIndex: 0
                    }
                ]
            };

            chart.setOption(option);
        },
        initChartPartyFinding3rd(response, type) {
            let chartDom;
            chartDom = this.$refs.partyFinding3rd;
            if (!chartDom) return;

            const chart = echarts.init(chartDom);
            let datas;
            if (type) {
                datas = [
                    ['月份', '第三方-严重', '第三方-轻微', '第三方指摘件数', '第三方关闭率%', '动态关闭率%'],
                    ...response.map(item => [
                        item.month,   // 对应xAxis数据
                        item.partyMajor3Rd,   // 第三方-严重
                        item.partyMinor3Rd,   // 第三方-轻微
                        item.partyFindings3Rd,  //第三方指摘件数
                        item.partyFindings3Rd ? (item.partyCloseMil3Rd / item.partyFindings3Rd * 100).toFixed(0) : '0',  // 第三方关闭率
                        item.partyLatestCloseMil ? (item.partyLatestCloseMil / item.partyFindings3Rd * 100).toFixed(0) : '0'
                    ])
                ];
            } else {
                datas = [
                    ['生产线', '第三方-严重', '第三方-轻微', '第三方指摘件数', '第三方关闭率%', '动态关闭率%'],
                    ...response.map(item => [
                        item.line,   // 对应xAxis数据
                        item.partyMajor3Rd,   // 第三方-严重
                        item.partyMinor3Rd,   // 第三方-轻微
                        item.partyFindings3Rd,  //第三方指摘件数
                        item.partyFindings3Rd ? (item.partyCloseMil3Rd / item.partyFindings3Rd * 100).toFixed(0) : '0',  // 第三方关闭率
                        item.partyLatestCloseMil ? (item.partyLatestCloseMil / item.partyFindings3Rd * 100).toFixed(0) : '0'
                    ])
                ];
            }
            let max = 0;
            let sum1 = 0;
            let sum3 = 0;
            for (let index = 0; index < response.length; index++) {
                sum1 += response[index].partyFindings3Rd;
                sum3 += response[index].partyCloseMil3Rd ? response[index].partyCloseMil3Rd : 0;
                if (response[index].partyFindings3Rd > max) {
                    max = response[index].partyFindings3Rd;
                }
            }

            let sum = 1;
            for (let index = 0; index < (max + "").length; index++) {
                sum += '0'
            }
            max = Math.ceil(max / sum * 10) * sum / 10 + 5;
            // 柱状图
            const option = {
                title: [
                    // 右侧标题
                    {
                        text: `总件数:${sum1}    总关闭率:${Math.round(sum3 / sum1 * 100)}%`,
                        right: 0,
                        top: 0,
                        textStyle: {
                            fontSize: 12,
                            fontWeight: 'bold'
                        }
                    },
                    // 主标题
                    {
                        left: 'center',
                        top: 30  // 下移给顶部标题留空间
                    }
                ],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                dataset: [
                    {
                        source: datas,
                    }
                ],
                legend: {
                    data: this.orderlist,
                    bottom: 10
                },
                grid: {
                    top: '15%',
                    right: '5%',
                    left: '10%',
                    bottom: '20%'
                },
                xAxis: {
                    type: 'category',
                    // data: this.queryParams.selectedLines,
                    axisLabel: {
                        interval: 0,
                        rotate: 0
                    }
                },
                yAxis:
                    [
                        {
                            type: 'value',
                            name: '',
                            min: 0,
                            max: max,
                            position: 'left',
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: '#5470C6'
                                }
                            },
                            axisLabel: {
                                formatter: '{value}'
                            }
                        },
                        {
                            type: 'value',
                            name: '',
                            min: 0,
                            max: 100,
                            position: 'right',
                            offset: 0,
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: '#EE6666'
                                }
                            },
                            axisLabel: {
                                formatter: '{value}%'
                            }
                        },
                    ],
                series: [
                    {
                        name: '第三方-严重',
                        type: 'bar',
                        barWidth: '25%',
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#EF8080' },
                                { offset: 0.5, color: '#F14444' },
                                { offset: 1, color: '#FF0000' }
                            ])
                        },
                        emphasis: {
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    { offset: 0, color: '#FF0000' },
                                    { offset: 0.7, color: '#F14444' },
                                    { offset: 1, color: '#EF8080' }
                                ])
                            }
                        },
                        datasetIndex: this.datasetIndex
                    },
                    {
                        name: '第三方-轻微',
                        type: 'bar',
                        barWidth: '25%',
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#FFCA66' },
                                { offset: 0.5, color: '#FDB62E' },
                                { offset: 1, color: '#FFA402' }
                            ])
                        },
                        emphasis: {
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    { offset: 0, color: '#FFA402' },
                                    { offset: 0.7, color: '#FDB62E' },
                                    { offset: 1, color: '#FFCA66' }
                                ])
                            }
                        },
                        datasetIndex: this.datasetIndex
                    },
                    {
                        name: '第三方指摘件数',
                        type: 'line',
                        yAxisIndex: 0,
                        symbol: 'circle',
                        symbolSize: 8,
                        lineStyle: {
                            width: 3,
                            type: 'dashed',
                        },
                        label: {
                            show: true,
                            position: 'top',
                        },
                        itemStyle: {
                            color: '#E851D6'
                        },
                        datasetIndex: this.datasetIndex
                    },
                    {
                        name: '第三方关闭率%',
                        type: 'line',
                        yAxisIndex: 1,
                        symbol: 'circle',
                        symbolSize: 8,
                        lineStyle: {
                            width: 3,
                            // type: 'dashed',
                        },
                        label: {
                            show: true,
                            position: 'top',
                            formatter: function (params) {
                                return params.value[4] + '%';
                            }
                        },
                        itemStyle: {
                            color: '#4EC9F1'
                        },
                        datasetIndex: this.datasetIndex
                    },
                    {
                        name: '动态关闭率%',
                        type: 'line',
                        yAxisIndex: 1,
                        symbol: 'circle',
                        symbolSize: 8,
                        lineStyle: {
                            width: 3,
                            type: 'dashed',
                        },
                        label: {
                            show: true,
                            position: 'top',
                            formatter: function (params) {
                                return params.value[5] + '%';
                            }
                        },
                        itemStyle: {
                            color: '#4EC9F1'
                        },
                        datasetIndex: this.datasetIndex
                    }
                ]
            };

            chart.setOption(option);
        },
        initChartOQCBatchScan(response, type) {
            let chartDom;
            chartDom = this.$refs.oqcBatchScan;
            if (!chartDom) return;

            const chart = echarts.init(chartDom);
            let datas;
            if (type) {
                datas = [
                    ['月份', 'OQC扫描不良'],
                    ...response.map(item => [
                        item.month,   // 对应xAxis数据
                        item.oqcScanNgQty ? (item.oqcScanNgQty / item.oqcScanQty * 100).toFixed(2) : 0.00    // OQC Batch Scan-OQC扫码不良
                    ])
                ];
            } else {
                datas = [
                    ['生产线', 'OQC扫描不良'],
                    ...response.map(item => [
                        item.line,   // 对应xAxis数据
                        item.oqcScanNgQty ? (item.oqcScanNgQty / item.oqcScanQty * 100).toFixed(2) : 0.00    // OQC Batch Scan-OQC扫码不良
                    ])
                ];
            }
            let max = 0;
            let sum1 = 0;
            let sum2 = 0;
            for (let index = 0; index < response.length; index++) {
                sum2 += response[index].oqcScanNgQty
                sum1 += response[index].oqcScanQty
                if (max < response[index].oqcScanNgQty / response[index].oqcScanQty * 100) {
                    max = response[index].oqcScanNgQty / response[index].oqcScanQty * 100
                }
            }
            max = (max + 1).toFixed(0)
            sum1 = sum2 / sum1 * 100


            // 柱状图
            const option = {
                title: [
                    // 右侧标题
                    {
                        text: `总扫码不良率: ${Number(sum1).toFixed(2)}%`,
                        right: 0,
                        top: 0,
                        textStyle: {
                            fontSize: 12,
                            fontWeight: 'bold'
                        }
                    },
                    // 主标题
                    {
                        left: 'center',
                        top: 30  // 下移给顶部标题留空间
                    }
                ],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                dataset: [
                    {
                        source: datas,
                    }
                ],
                legend: {
                    data: ['OQC扫描不良'],
                    bottom: 10
                },
                grid: {
                    top: '15%',
                    right: '5%',
                    left: '10%',
                    bottom: '20%'
                },
                xAxis: {
                    type: 'category',
                    // data: this.queryParams.selectedLines,
                    axisLabel: {
                        interval: 0,
                        rotate: 0
                    }
                },
                yAxis:
                    [
                        {
                            type: 'value',
                            name: '',
                            min: 0,
                            max: max,
                            position: 'left',
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: '#5470C6'
                                }
                            },
                            axisLabel: {
                                formatter: '{value}%'
                            }
                        }
                    ],
                series: [
                    {
                        name: 'OQC扫描不良',
                        type: 'line',
                        yAxisIndex: 0,
                        symbol: 'circle',
                        symbolSize: 8,
                        lineStyle: {
                            width: 3,
                            // type: 'dashed',
                        },
                        label: {
                            show: true,
                            position: 'top',
                            formatter: function (params) {
                                return params.value[1] + '%';
                            }
                        },
                        itemStyle: {
                            color: '#E851D6'
                        },
                        datasetIndex: 0
                    }
                ]
            };

            chart.setOption(option);
        },
        initChartOQCLrr(response, type) {
            let chartDom;
            chartDom = this.$refs.oqcLrr;
            if (!chartDom) return;

            const chart = echarts.init(chartDom);
            let datas;
            if (type) {
                datas = [
                    ['月份', 'OQC检查lot数', 'OQC判退lot数', 'OQC-LRR%'],
                    ...response.map(item => [
                        item.month,   // 对应xAxis数据
                        item.oqcInspLot,   // OQC检查lot数
                        item.oqcRejectLot,   // OQC判退lot数
                        item.oqcLrr ? item.oqcLrr.toFixed(1) : '0.00'  // OQC-LRR
                    ])
                ];
            } else {
                datas = [
                    ['生产线', 'OQC检查lot数', 'OQC判退lot数', 'OQC-LRR%'],
                    ...response.map(item => [
                        item.line,   // 对应xAxis数据
                        item.oqcInspLot,   // OQC检查lot数
                        item.oqcRejectLot,   // OQC判退lot数
                        item.oqcLrr ? item.oqcLrr.toFixed(1) : '0.00'  // OQC-LRR
                    ])
                ];
            }
            let max = 0;
            let max2 = 0;
            let sum1 = 0;
            let sum2 = 0;
            let sum3 = 0;
            for (let index = 0; index < response.length; index++) {
                sum1 += response[index].oqcInspLot;
                sum2 += response[index].oqcRejectLot;
                sum3 += response[index].oqcLrr ? response[index].oqcLrr : 0;
                if (response[index].oqcInspLot > max) {
                    max = response[index].oqcInspLot;
                }
                if (response[index].oqcLrr > max2) {
                    max2 = response[index].oqcLrr;
                }
            }

            let sum = 1;
            for (let index = 0; index < (max + "").length; index++) {
                sum += '0'
            }
            max = Math.ceil(max / sum * 10) * sum / 10;
            max2 = Math.ceil(max2 / 10) * 10;
            sum3 = (sum3 / response.length).toFixed(2)
            // 柱状图
            const option = {
                title: [
                    // 右侧标题
                    {
                        text: `总选检查lot数:${sum1}   判退lot:${sum2}   判退率:${Number(sum2 / sum1 * 100).toFixed(1)}%`,
                        right: 0,
                        top: 0,
                        textStyle: {
                            fontSize: 12,
                            fontWeight: 'bold'
                        }
                    },
                    // 主标题
                    {
                        left: 'center',
                        top: 30  // 下移给顶部标题留空间
                    }
                ],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                dataset: [
                    {
                        source: datas,
                    }
                ],
                legend: {
                    data: this.orderlist,
                    bottom: 10
                },
                grid: {
                    top: '15%',
                    right: '5%',
                    left: '10%',
                    bottom: '20%'
                },
                xAxis: {
                    type: 'category',
                    axisLabel: {
                        interval: 0,
                        rotate: 0
                    }
                },
                yAxis:
                    [
                        {
                            type: 'value',
                            name: '',
                            min: 0,
                            max: max,
                            position: 'left',
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: '#5470C6'
                                }
                            },
                            axisLabel: {
                                formatter: '{value}'
                            }
                        },
                        {
                            type: 'value',
                            name: '',
                            min: 0,
                            max: max2,
                            position: 'right',
                            offset: 0,
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: '#EE6666'
                                }
                            },
                            axisLabel: {
                                formatter: '{value}%'
                            }
                        },
                        {}
                    ],
                series: [
                    {
                        name: 'OQC检查lot数',
                        type: 'bar',
                        barWidth: '25%',
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#83bff6' },
                                { offset: 0.5, color: '#188df0' },
                                { offset: 1, color: '#188df0' }
                            ])
                        },
                        emphasis: {
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    { offset: 0, color: '#2378f7' },
                                    { offset: 0.7, color: '#2378f7' },
                                    { offset: 1, color: '#83bff6' }
                                ])
                            }
                        },
                        datasetIndex: this.datasetIndex
                    },
                    {
                        name: 'OQC判退lot数',
                        type: 'bar',
                        barWidth: '25%',
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#EF8080' },
                                { offset: 0.5, color: '#F14444' },
                                { offset: 1, color: '#FF0000' }
                            ])
                        },
                        emphasis: {
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    { offset: 0, color: '#FF0000' },
                                    { offset: 0.7, color: '#F14444' },
                                    { offset: 1, color: '#EF8080' }
                                ])
                            }
                        },
                        datasetIndex: this.datasetIndex
                    },
                    {
                        name: 'OQC-LRR%',
                        type: 'line',
                        yAxisIndex: 1,
                        symbol: 'circle',
                        symbolSize: 8,
                        lineStyle: {
                            width: 3,
                            type: 'dashed',
                        },
                        label: {
                            show: true,
                            position: 'top',
                            formatter: function (params) {
                                return params.value[3] + '%';
                            }
                        },
                        itemStyle: {
                            color: '#E851D6'
                        },
                        datasetIndex: this.datasetIndex
                    }
                ]
            };

            chart.setOption(option);
        },
        initChartOQCDppm(response, type) {
            let chartDom;
            chartDom = this.$refs.oqcDppm;
            if (!chartDom) return;

            const chart = echarts.init(chartDom);
            let datas;
            if (type) {
                datas = [
                    ['月份', '抽检不良'],
                    ...response.map(item => [
                        item.month,   // 对应xAxis数据
                        Number(item.oqcDppm).toFixed(0)    // 抽检不良
                    ])
                ];
            } else {
                datas = [
                    ['生产线', '抽检不良'],
                    ...response.map(item => [
                        item.line,   // 对应xAxis数据
                        Number(item.oqcDppm).toFixed(0)    // 抽检不良
                    ])
                ];
            }
            let max = 0;
            let sum1 = 0;
            let sum2 = 0;
            let sum3 = 0;
            for (let index = 0; index < response.length; index++) {
                sum2 += response[index].oqcNgQty;
                sum3 += response[index].oqcInspQty
                sum1 += response[index].oqcDppm;
                if (response[index].oqcDppm > max) {
                    max = response[index].oqcDppm;
                }
            }
            let sum = 1;
            for (let index = 0; index < (max + "").length; index++) {
                sum += '0'
            }
            max = (max * 1.2).toFixed(0)
            // 柱状图
            const option = {
                title: [
                    // 右侧标题
                    {
                        text: `总DPPM:${Math.round(sum2 / sum3 * 1000000)}`,
                        right: 0,
                        top: 0,
                        textStyle: {
                            fontSize: 12,
                            fontWeight: 'bold'
                        }
                    },
                    // 主标题
                    {
                        left: 'center',
                        top: 30  // 下移给顶部标题留空间
                    }
                ],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                dataset: [
                    {
                        source: datas,
                    }
                ],
                legend: {
                    data: ['抽检不良'],
                    bottom: 10
                },
                grid: {
                    top: '15%',
                    right: '5%',
                    left: '10%',
                    bottom: '20%'
                },
                xAxis: {
                    type: 'category',
                    // data: this.queryParams.selectedLines,
                    axisLabel: {
                        interval: 0,
                        rotate: 0
                    }
                },
                yAxis:
                    [
                        {
                            type: 'value',
                            name: '',
                            min: 0,
                            max: max,
                            position: 'left',
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: '#5470C6'
                                }
                            },
                            axisLabel: {
                                formatter: '{value}'
                            }
                        }
                    ],
                series: [
                    {
                        name: '抽检不良',
                        type: 'bar',
                        label: {
                            show: true,
                            position: 'top',
                        },
                        barWidth: '25%',
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#EF8080' },
                                { offset: 0.5, color: '#F14444' },
                                { offset: 1, color: '#FF0000' }
                            ])
                        },
                        emphasis: {
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    { offset: 0, color: '#FF0000' },
                                    { offset: 0.7, color: '#F14444' },
                                    { offset: 1, color: '#EF8080' }
                                ])
                            }
                        },
                        datasetIndex: 0
                    }
                ]
            };

            chart.setOption(option);
        },
        initChartOQCOba(response, type) {
            let chartDom;
            chartDom = this.$refs.oqcOba;
            if (!chartDom) return;

            const chart = echarts.init(chartDom);
            let datas;
            if (type) {
                datas = [
                    ['月份', '抽检不良'],
                    ...response.map(item => [
                        item.month,   // 对应xAxis数据
                        item.obaRejectTime    // 抽检不良
                    ])
                ];
            } else {
                datas = [
                    ['生产线', '抽检不良'],
                    ...response.map(item => [
                        item.line,   // 对应xAxis数据
                        item.obaRejectTime    // 抽检不良
                    ])
                ];
            }
            let max = 0;
            let sum1 = 0;
            for (let index = 0; index < response.length; index++) {
                sum1 += response[index].obaRejectTime;
                if (response[index].obaRejectTime > max) {
                    max = response[index].obaRejectTime;
                }
            }
            let sum = 1;
            for (let index = 0; index < (max + "").length; index++) {
                sum += '0'
            }
            max = Math.ceil(max / sum * 10) * sum / 10 + 5;

            // 柱状图
            const option = {
                title: [
                    // 右侧标题
                    {
                        text: `异常件数:${sum1}`,
                        right: 0,
                        top: 0,
                        textStyle: {
                            fontSize: 12,
                            fontWeight: 'bold'
                        }
                    },
                    // 主标题
                    {
                        left: 'center',
                        top: 30  // 下移给顶部标题留空间
                    }
                ],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                dataset: [
                    {
                        source: datas,
                    }
                ],
                legend: {
                    data: ['异常件数'],
                    bottom: 10
                },
                grid: {
                    top: '15%',
                    right: '5%',
                    left: '10%',
                    bottom: '20%'
                },
                xAxis: {
                    type: 'category',
                    // data: this.queryParams.selectedLines,
                    axisLabel: {
                        interval: 0,
                        rotate: 0
                    }
                },
                yAxis:
                    [
                        {
                            type: 'value',
                            name: '',
                            min: 0,
                            max: max,
                            position: 'left',
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: '#5470C6'
                                }
                            },
                            axisLabel: {
                                formatter: '{value}'
                            }
                        }
                    ],
                series: [
                    {
                        name: '异常件数',
                        type: 'bar',
                        label: {
                            show: true,
                            position: 'top',
                        },
                        barWidth: '25%',
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#EF8080' },
                                { offset: 0.5, color: '#F14444' },
                                { offset: 1, color: '#FF0000' }
                            ])
                        },
                        emphasis: {
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    { offset: 0, color: '#FF0000' },
                                    { offset: 0.7, color: '#F14444' },
                                    { offset: 1, color: '#EF8080' }
                                ])
                            }
                        },
                        datasetIndex: 0
                    }
                ]
            };

            chart.setOption(option);
        },
        initChartFoxInsight(response, type) {
            let chartDom;
            chartDom = this.$refs.foxInsight;
            if (!chartDom) return;

            const chart = echarts.init(chartDom);
            let datas;
            if (type) {
                datas = [
                    ['月份', 'Fox-延迟', 'Fox-FPY', 'Fox-SPI', 'Fox-ICT', 'Fox总件数'],
                    ...response.map(item => [
                        item.month,   // 对应xAxis数据
                        item.foxDelay,   // FOX延迟
                        item.foxFpy,   // FOX-FPY
                        item.foxSpi,    //FOX-SPI
                        item.foxIct,   // FOX-ICT
                        item.foxTotal    //FOX总件数
                    ])
                ];
            } else {
                datas = [
                    ['生产线', 'Fox-延迟', 'Fox-FPY', 'Fox-SPI', 'Fox-ICT', 'Fox总件数'],
                    ...response.map(item => [
                        item.line,   // 对应xAxis数据
                        item.foxDelay,   // FOX延迟
                        item.foxFpy,   // FOX-FPY
                        item.foxSpi,    //FOX-SPI
                        item.foxIct,   // FOX-ICT
                        item.foxTotal    //FOX总件数
                    ])
                ];
            }
            let max = 0;
            let sum1 = 0;
            let sum3 = 0;
            for (let index = 0; index < response.length; index++) {
                sum1 += response[index].foxTotal;
                sum3 += response[index].foxIct ? response[index].foxIct : 0;
                if (response[index].foxTotal > max) {
                    max = response[index].foxTotal;
                }
            }

            let sum = 1;
            for (let index = 0; index < (max + "").length; index++) {
                sum += '0'
            }
            max = Math.ceil(max / sum * 10) * sum / 10;
            sum3 = (sum3 / response.length * 100).toFixed(2)
            // 柱状图
            const option = {
                title: [
                    // 右侧标题
                    {
                        text: `总件数:${sum1}`,
                        right: 0,
                        top: 0,
                        textStyle: {
                            fontSize: 12,
                            fontWeight: 'bold'
                        }
                    },
                    // 主标题
                    {
                        left: 'center',
                        top: 30  // 下移给顶部标题留空间
                    }
                ],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                dataset: [
                    {
                        source: datas,
                    }
                ],
                legend: {
                    data: this.orderlist,
                    bottom: 10
                },
                grid: {
                    top: '15%',
                    right: '5%',
                    left: '10%',
                    bottom: '20%'
                },
                xAxis: {
                    type: 'category',
                    // data: this.queryParams.selectedLines,
                    axisLabel: {
                        interval: 0,
                        rotate: 0
                    }
                },
                yAxis:
                    [
                        {
                            type: 'value',
                            name: '',
                            min: 0,
                            max: max,
                            position: 'left',
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: '#5470C6'
                                }
                            },
                            axisLabel: {
                                formatter: '{value}'
                            }
                        },
                    ],
                series: [
                    {
                        name: 'Fox-延迟',
                        type: 'bar',
                        stack: 'x',
                        barWidth: '25%',
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#FBE778' },
                                { offset: 0.5, color: '#F7E359' },
                                { offset: 1, color: '#F5D321' }
                            ])
                        },
                        emphasis: {
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    { offset: 0, color: '#F5D321' },
                                    { offset: 0.7, color: '#F7E359' },
                                    { offset: 1, color: '#FBE778' }
                                ])
                            }
                        },
                        datasetIndex: 0
                    },
                    {
                        name: 'Fox-FPY',
                        type: 'bar',
                        stack: 'x',
                        barWidth: '25%',
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#EABD6E' },
                                { offset: 0.5, color: '#EFAF47' },
                                { offset: 1, color: '#F5A921' }
                            ])
                        },
                        emphasis: {
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    { offset: 0, color: '#F5A921' },
                                    { offset: 0.7, color: '#EFAF47' },
                                    { offset: 1, color: '#EABD6E' }
                                ])
                            }
                        },
                        datasetIndex: 0
                    },
                    {
                        name: 'Fox-SPI',
                        type: 'bar',
                        stack: 'x',
                        barWidth: '25%',
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#F52121' },
                                { offset: 0.5, color: '#F14949' },
                                { offset: 1, color: '#F36565' }
                            ])
                        },
                        emphasis: {
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    { offset: 0, color: '#F36565' },
                                    { offset: 0.7, color: '#F14949' },
                                    { offset: 1, color: '#F52121' }
                                ])
                            }
                        },
                        datasetIndex: 0
                    },
                    {
                        name: 'Fox-ICT',
                        type: 'bar',
                        stack: 'x',
                        barWidth: '25%',
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#F37878' },
                                { offset: 0.5, color: '#E89797' },
                                { offset: 1, color: '#E8B4B4' }
                            ])
                        },
                        emphasis: {
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    { offset: 0, color: '#E8B4B4' },
                                    { offset: 0.7, color: '#E89797' },
                                    { offset: 1, color: '#F37878' }
                                ])
                            }
                        },
                        datasetIndex: 0
                    },
                    {
                        name: 'Fox总件数',
                        type: 'line',
                        yAxisIndex: 0,
                        symbol: 'circle',
                        symbolSize: 8,
                        lineStyle: {
                            width: 3,
                            type: 'dashed',
                        },
                        label: {
                            show: true,
                            position: 'top'
                        },
                        itemStyle: {
                            color: '#E851D6'
                        },
                        datasetIndex: 0
                    }
                ]
            };

            chart.setOption(option);
        },
        initChartSpiFpy(response, type) {
            let chartDom;
            chartDom = this.$refs.spiFpy;
            if (!chartDom) return;

            const chart = echarts.init(chartDom);
            let datas;
            if (type) {
                datas = [
                    ['生产线', '工程良率(SPI)'],
                    ...response.map(item => [
                        item.month,   // 对应xAxis数据
                        item.spiFpy ? item.spiFpy.toFixed(2) : 0    // OQC Batch Scan-OQC扫码不良
                    ])
                ];
            } else {
                datas = [
                    ['生产线', '工程良率(SPI)'],
                    ...response.map(item => [
                        item.line,   // 对应xAxis数据
                        item.spiFpy ? item.spiFpy.toFixed(2) : 0    // OQC Batch Scan-OQC扫码不良
                    ])
                ];
            }
            let max = 0;
            let sum1 = 0;
            let sum2 = 0;
            let sum3 = 0;
            for (let index = 0; index < response.length; index++) {
                sum2 += response[index].spiOutput;
                sum3 += response[index].spiInput;
                sum1 += response[index].spiFpy;
                if (response[index].spiFpy > max) {
                    max = response[index].spiFpy;
                }
            }

            sum1 = (sum1 / response.length).toFixed(2);

            max = Math.ceil(max) + 5;

            // 柱状图
            const option = {
                title: [
                    // 右侧标题
                    {
                        text: `平均FPY: ${Number(sum2 / sum3 * 100).toFixed(1)}%`,
                        right: 0,
                        top: 0,
                        textStyle: {
                            fontSize: 12,
                            fontWeight: 'bold'
                        }
                    },
                    // 主标题
                    {
                        left: 'center',
                        top: 30  // 下移给顶部标题留空间
                    }
                ],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                dataset: [
                    {
                        source: datas,
                    }
                ],
                legend: {
                    data: ['工程良率(SPI)'],
                    bottom: 10
                },
                grid: {
                    top: '15%',
                    right: '5%',
                    left: '10%',
                    bottom: '20%'
                },
                xAxis: {
                    type: 'category',
                    // data: this.queryParams.selectedLines,
                    axisLabel: {
                        interval: 0,
                        rotate: 0
                    }
                },
                yAxis:
                    [
                        {
                            type: 'value',
                            name: '',
                            min: 0,
                            max: max,
                            position: 'left',
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: '#5470C6'
                                }
                            },
                            axisLabel: {
                                formatter: '{value}%'
                            }
                        }
                    ],
                series: [
                    {
                        name: '工程良率(SPI)',
                        type: 'line',
                        yAxisIndex: 0,
                        symbol: 'circle',
                        symbolSize: 8,
                        lineStyle: {
                            width: 3,
                            // type: 'dashed',
                        },
                        label: {
                            show: true,
                            position: 'top',
                            formatter: function (params) {
                                return params.value[1] + '%';
                            }
                        },
                        itemStyle: {
                            color: '#4EC9F1'
                        },
                        datasetIndex: 0
                    }
                ]
            };

            chart.setOption(option);
        },
        initChartAoiFpy(response, type) {
            let chartDom;
            chartDom = this.$refs.aoiFpy;
            if (!chartDom) return;

            const chart = echarts.init(chartDom);
            let datas;
            if (type) {
                datas = [
                    ['月份', 'AOI FPY', 'AOI FY'],
                    ...response.map(item => [
                        item.month,   // 对应xAxis数据
                        item.aoiFpy ? item.aoiFpy.toFixed(2) : 0, //AOI FPY
                        item.aoiFy ? item.aoiFy.toFixed(2) : 0    // AOI FY
                    ])
                ];
            } else {
                datas = [
                    ['生产线', 'AOI FPY', 'AOI FY'],
                    ...response.map(item => [
                        item.line,   // 对应xAxis数据
                        item.aoiFpy ? item.aoiFpy.toFixed(2) : 0, //AOI FPY
                        item.aoiFy ? item.aoiFy.toFixed(2) : 0    // AOI FY
                    ])
                ];
            }
            let max = 0;
            let sum1 = 0;
            let sum2 = 0;
            let sum3 = 0;
            let sum4 = 0;
            let sum5 = 0;
            for (let index = 0; index < response.length; index++) {
                sum1 += response[index].aoiFpy;
                sum2 += response[index].aoiFy;
                sum3 += response[index].aoiFpQty;
                sum4 += response[index].aoiOutput;
                sum5 += response[index].aoiInput;
                if (response[index].aoiFpy > max) {
                    max = response[index].aoiFpy;
                }
            }

            sum1 = (sum1 / response.length).toFixed(2);
            sum2 = (sum2 / response.length).toFixed(2);
            max = Math.ceil(max) + 5;

            // 柱状图
            const option = {
                title: [
                    // 右侧标题
                    {
                        text: `平均FPY: ${Number(sum3 / sum5 * 100).toFixed(1)}%       平均FY: ${Number(sum4 / sum5 * 100).toFixed(1)}%`,
                        right: 0,
                        top: 0,
                        textStyle: {
                            fontSize: 12,
                            fontWeight: 'bold'
                        }
                    },
                    // 主标题
                    {
                        left: 'center',
                        top: 30  // 下移给顶部标题留空间
                    }
                ],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                dataset: [
                    {
                        source: datas,
                    }
                ],
                legend: {
                    data: ['AOI FPY', 'AOI FY'],
                    bottom: 10
                },
                grid: {
                    top: '15%',
                    right: '5%',
                    left: '10%',
                    bottom: '20%'
                },
                xAxis: {
                    type: 'category',
                    // data: this.queryParams.selectedLines,
                    axisLabel: {
                        interval: 0,
                        rotate: 0
                    }
                },
                yAxis:
                    [
                        {
                            type: 'value',
                            name: '',
                            min: 0,
                            max: max,
                            position: 'left',
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: '#5470C6'
                                }
                            },
                            axisLabel: {
                                formatter: '{value}%'
                            }
                        }
                    ],
                series: [
                    {
                        name: 'AOI FPY',
                        type: 'line',
                        yAxisIndex: 0,
                        symbol: 'circle',
                        symbolSize: 8,
                        lineStyle: {
                            width: 3,
                            // type: 'dashed',
                        },
                        label: {
                            show: true,
                            position: 'top',
                            formatter: function (params) {
                                return params.value[1] + '%';
                            }
                        },
                        itemStyle: {
                            color: '#4EC9F1'
                        },
                        datasetIndex: this.datasetIndex
                    },
                    {
                        name: 'AOI FY',
                        type: 'line',
                        yAxisIndex: 0,
                        symbol: 'circle',
                        symbolSize: 8,
                        lineStyle: {
                            width: 3,
                            type: 'dashed',
                        },
                        label: {
                            show: true,
                            position: 'top',
                            formatter: function (params) {
                                return params.value[2] + '%';
                            }
                        },
                        itemStyle: {
                            color: '#3CC7B1'
                        },
                        datasetIndex: this.datasetIndex
                    }
                ]
            };

            chart.setOption(option);
        },
        initChartIctFpy(response, type) {
            let chartDom;
            chartDom = this.$refs.ictFpy;
            if (!chartDom) return;

            const chart = echarts.init(chartDom);
            let datas;
            if (type) {
                datas = [
                    ['月份', 'ICT FPY', 'ICT FY'],
                    ...response.map(item => [
                        item.month,   // 对应xAxis数据
                        item.ictFpy ? item.ictFpy.toFixed(2) : 0, //ICT FPY
                        item.ictFy ? item.ictFy.toFixed(2) : 0    // ICT FY
                    ])
                ];
            } else {
                datas = [
                    ['生产线', 'ICT FPY', 'ICT FY'],
                    ...response.map(item => [
                        item.line,   // 对应xAxis数据
                        item.ictFpy ? item.ictFpy.toFixed(2) : 0, //ICT FPY
                        item.ictFy ? item.ictFy.toFixed(2) : 0    // ICT FY
                    ])
                ];
            }
            let max = 0;
            let sum1 = 0;
            let sum2 = 0;
            let sum3 = 0;
            let sum4 = 0;
            let sum5 = 0;
            for (let index = 0; index < response.length; index++) {
                sum1 += response[index].ictFpy;
                sum2 += response[index].ictFy;
                sum3 += response[index].ictFpQty;
                sum4 += response[index].ictOutput;
                sum5 += response[index].ictInput;
                if (response[index].ictFpy > max) {
                    max = response[index].ictFpy;
                }
            }

            sum1 = (sum1 / response.length).toFixed(2);
            sum2 = (sum2 / response.length).toFixed(2);
            max = Math.ceil(max) + 5;

            // 柱状图
            const option = {
                title: [
                    // 右侧标题
                    {
                        text: `平均FPY: ${Number(sum3 / sum5 * 100).toFixed(1)}%       平均FY: ${Number(sum4 / sum5 * 100).toFixed(1)}%`,
                        right: 0,
                        top: 0,
                        textStyle: {
                            fontSize: 12,
                            fontWeight: 'bold'
                        }
                    },
                    // 主标题
                    {
                        left: 'center',
                        top: 30  // 下移给顶部标题留空间
                    }
                ],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                dataset: [
                    {
                        source: datas,
                    }
                ],
                legend: {
                    data: ['ICT FPY', 'ICT FY'],
                    bottom: 10
                },
                grid: {
                    top: '15%',
                    right: '5%',
                    left: '10%',
                    bottom: '20%'
                },
                xAxis: {
                    type: 'category',
                    // data: this.queryParams.selectedLines,
                    axisLabel: {
                        interval: 0,
                        rotate: 0
                    }
                },
                yAxis:
                    [
                        {
                            type: 'value',
                            name: '',
                            min: 0,
                            max: max,
                            position: 'left',
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: '#5470C6'
                                }
                            },
                            axisLabel: {
                                formatter: '{value}%'
                            }
                        }
                    ],
                series: [
                    {
                        name: 'ICT FPY',
                        type: 'line',
                        yAxisIndex: 0,
                        symbol: 'circle',
                        symbolSize: 8,
                        lineStyle: {
                            width: 3,
                            // type: 'dashed',
                        },
                        label: {
                            show: true,
                            position: 'top',
                            formatter: function (params) {
                                return params.value[1] + '%';
                            }
                        },
                        itemStyle: {
                            color: '#4EC9F1'
                        },
                        datasetIndex: this.datasetIndex
                    },
                    {
                        name: 'ICT FY',
                        type: 'line',
                        yAxisIndex: 0,
                        symbol: 'circle',
                        symbolSize: 8,
                        lineStyle: {
                            width: 3,
                            type: 'dashed',
                        },
                        label: {
                            show: true,
                            position: 'top',
                            formatter: function (params) {
                                return params.value[2] + '%';
                            }
                        },
                        itemStyle: {
                            color: '#3CC7B1'
                        },
                        datasetIndex: this.datasetIndex
                    }
                ]
            };

            chart.setOption(option);
        },
    }
};
</script>

<style scoped>
#app {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    /* background-color: #f0f2f5; */
    color: #333;
    padding: 20px;
    min-height: 100vh;
}

.filter-container {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    margin-bottom: 25px;
}

.filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    margin-bottom: 15px;
}

.filter-group {
    flex: 1;
    min-width: 250px;
}

.filter-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #555;
}

.chart-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.chart-card {
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.chart-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.chart-header {
    background: linear-gradient(to right, #f8f9fc, #e9ecef);
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
}

.chart-title {
    font-size: 16px;
    /* 标题字体缩小 */
    font-weight: 600;
    color: #2c3e50;
    display: flex;
    align-items: center;
}

.chart-title i {
    margin-right: 8px;
    color: #3498db;
    font-size: 18px;
}

.chart-body {
    padding: 15px;
    flex: 1;
    /* 使图表区域填充剩余空间 */
    min-height: 280px;
    /* 最小高度保证一致性 */
}

.chart-container {
    width: 100%;
    height: 100%;
}

.action-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    margin-top: 15px;
}

/* 响应式调整 */
@media (max-width: 1200px) {
    .chart-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        /* 中等屏幕每行2个 */
    }
}

@media (max-width: 900px) {
    .chart-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        /* 小屏幕每行2个 */
    }

    .chart-title {
        font-size: 15px;
    }
}

@media (max-width: 768px) {
    .chart-grid {
        grid-template-columns: 1fr;
        /* 移动端每行1个 */
    }

    .filter-row {
        flex-direction: column;
        gap: 15px;
    }

    .filter-group {
        min-width: 100%;
    }

    .action-buttons {
        flex-wrap: wrap;
        justify-content: center;
    }

    .action-buttons .el-button {
        flex: 1;
        min-width: 120px;
    }
}

@media (max-width: 480px) {
    .chart-body {
        min-height: 250px;
        /* 移动端图表高度稍小 */
    }

    .chart-title {
        font-size: 14px;
    }
}

/* 添加鼠标悬停提示 */
.chart-card:hover {
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    transform: translateY(-3px);
    transition: all 0.3s ease;
}

/* 添加双击效果提示 */
.chart-card:active {
    transform: scale(0.98);
}
</style>